import { hashHistory } from 'react-router';
import React from 'react';
import ReactDOM from 'react-dom';
require("./log.css");

// 登录注册Log.js里面用到的登录组件
class LoginForm extends React.Component{

    // react有一个周期的constructor()是一开始初始化，这里先判断之前本地里面是否已经有存了用户的用户名和密码，
    // 如果有，直接拿到在账号密码处填好，默认是记住账号和密码，再次存到本地，如果取消了记住账号和密码的勾，就会将本地的账号和密码clear
    // 如果本地没有，则进一步判断这个人是否已经登录过并且当前这个窗口没有关闭过，可以自由进到后面的“/home_me”
    // 如果本地和会话窗口里面都没有存有，就将loginID,loginPwd,都设为空，登录成功时根据是否记住密码状态再考虑如何存。
   constructor() {
        super();
        const userLocalStorage = JSON.parse(window.localStorage.getItem('userStorage'));
        const userSessionStorage = JSON.parse(window.sessionStorage.getItem('userStorage'));

        if(userLocalStorage != null){
            this.state={
                checked : true,
                loginID: userLocalStorage.user_id,
                loginPwd: userLocalStorage.user_password,
                user : [],
                userID:'',
                userPwd:''
            };
        }else if(userSessionStorage != null){
            this.state={
                checked : true,
                loginID: userSessionStorage.user_id,
                loginPwd: userSessionStorage.user_password,
                user : [],
                userID:'',
                userPwd:''
            };
        }else {
            this.state={
                checked : true,
                loginID: '',
                loginPwd: '',
                user : [],
                userID:'',
                userPwd:''
            };
        }
    }

    // 将用户输入的职信号和密码和服务端进行比较，服务端会向我们返回一个json数据，如果网络连接失败，就会catch错误弹框交互
    // url是服务端提供我们的，返回的数据内容格式也是服务端给我们的，每次要考虑的就是body:json.stringify里面要提交，和then后面提交成功的下一步
    fetchData(){
        fetch("http://121.196.202.247:1010/user_login/?format=json", {
            method: "POST",
            headers: {
                'Accept': 'application/json',
                "Content-Type": "application/json; charset=utf-8"
            },
            body: JSON.stringify({
                user_id: this.state.loginID,
                user_password: this.state.loginPwd,
            })
        }) .then((response) => response.json())
            .then((responseText) => {
                this.conformUser(responseText);
            }).catch((error) => {alert("连接职信服务器失败，请查看网络连接状态并刷新页面！")});
    }

    // 如果在里面，服务器会返回这个用户的整行信息，反之，则只会返回“ responseText.user_id：login fail! ”，这里我分了管理员，
    // 数据库那边目前就只有一个管理员，就是hierachy == '1'的，到时候我叫他们再加几个吧，登录存数据，并跳转。
    conformUser(responseText){
        console.log("LoginForm.js"+responseText.user_id);
        if(responseText.user_id == 'login fail!'){
            alert("职信号或者密码输入错误，请再次输入！");
            this.setState({loginID:'', loginPwd:''});
            console.log("该用户登录失败");
            console.log("-----------------------------------------");
        }else{
            if(responseText.hierachy == '1'){
                console.log('管理员登录成功');
                console.log("==========================================");
                console.log(responseText);
                const response = JSON.stringify(responseText);
                window.sessionStorage.setItem('userStorage',response);
                console.log(window.sessionStorage.getItem('userStorage'));
                if(this.state.checked == true){
                    window.localStorage.setItem('userStorage',response);
                }else if(this.state.checked==false){
                    window.localStorage.clear();
                }
                hashHistory.push('/home_main_hr');
            }else{
                alert("抱歉，当前职信号非HR人员，无权访问，请输入正确的职信号和密码！");
                this.setState({loginID:'', loginPwd:''});
                console.log("该用户登录失败");
                console.log("-----------------------------------------");
            }
        }
    }

    // 判断表单是否填写完全，如果填写完全，则执行fetchData()
    handleSubmit(e){
        e.preventDefault();
        const login_id = ReactDOM.findDOMNode(this.refs.loginID).value.trim();
        const login_pwd = ReactDOM.findDOMNode(this.refs.loginPwd).value.trim();
        this.setState({loginID:login_id, loginPwd: login_pwd});
        console.log("该用户输入的职信号为："+login_id);
        console.log("该用户输入的密码为："+login_pwd);
        console.log("是否记住密码："+this.state.checked);

        if(login_id === "" || login_id === null){
            alert("请输入职信号");
            console.log("该用户登录失败");
            console.log("-----------------------------------------");
        }else if(login_pwd === "" || login_pwd === null){
            alert("请输入密码");
            console.log("该用户登录失败");
            console.log("-----------------------------------------");
        }
        else {
            this.fetchData();
        }
    }

    // 实时根据输入的值改变账号目标内的值
    handleChange1(e){
        this.setState({loginID: e.target.value});
    }

    // 实时根据输入的值改变密码目标内的值
    handleChange2(e){
        this.setState({loginPwd: e.target.value});
    }

    // 要渲染的组件，loginForm里面有submit登录，当点击登录就会执行handleSubmit(e)
    render() {
        return (
            <form ref="loginForm" onSubmit={function (e) {this.handleSubmit(e)}.bind(this)}>
                <p className="login_info"><span className="login_text">账号：&nbsp;</span>
                    <input type="text" placeholder="请输入职信号" value={this.state.loginID} onChange={this.handleChange1.bind(this)} className="login_id" ref="loginID"/> </p>
                <p className="login_info"><span className="login_text">密码：&nbsp;</span>
                    <input type="password" placeholder="请输入密码" value={this.state.loginPwd} onChange={this.handleChange2.bind(this)} className="login_pwd" ref="loginPwd"/> </p>
                <p className="login_info"><span className="login_rem"><input type="checkbox" ref="loginRem" checked={this.state.checked} onChange={ () => { this.setState({checked: !this.state.checked }) } }/>记住账号和密码</span>
                    <span className="login_forget">忘记密码？</span></p>
                <p className="login_info"><input type="submit" value="登录" className="login_btn"/></p>
            </form>
        );
    }
}

export default LoginForm;